<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>发送请求一</button>
    <button>发送请求二</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    // 实现功能
    // btns[0].onclick = function(){
    //     const xhr = new XMLHttpRequest();
    //     xhr.open("get","http://zhangpeiyue.com/sum?a=10&b=20");
    //     xhr.send();
    //     xhr.onload = function(){
    //       console.log(xhr.response);
    //     }
    // }
    // btns[1].onclick = function(){
    //   const xhr = new XMLHttpRequest();
    //   xhr.open("get","http://zhangpeiyue.com/sum?a=100&b=200");
    //   xhr.send();
    //   xhr.onload = function(){
    //     alert(xhr.response);
    //   }
    // }


    // 封装1- 解决处理响应体不同的方式
    // function ajax(cb){
    //   const xhr = new XMLHttpRequest();
    //   xhr.open("get","http://zhangpeiyue.com/sum?a=10&b=20");
    //   xhr.send();
    //   xhr.onload = function(){
    //     cb(xhr.response);
    //   }
    // }
    // // 输出响应体
    // btns[0].onclick = function(){
    //   ajax(function(response){
    //     console.log(response);
    //   });
    // }
    // // 弹出响应体
    // btns[1].onclick = function(){
    //   ajax(function(response){
    //     alert(response)
    //   });
    // }


    // 封装2：处理传递的参数
    // function ajax(query,cb){
    //   const xhr = new XMLHttpRequest();
    //   xhr.open("get","http://zhangpeiyue.com/sum?"+query);
    //   xhr.send();
    //   xhr.onload = function(){
    //     cb(xhr.response);
    //   }
    // }
    // // 输出响应体
    // btns[0].onclick = function(){
    //   ajax("a=10&b=20",function(response){
    //     console.log(response);
    //   });
    // }
    // // 弹出响应体
    // btns[1].onclick = function(){
    //   ajax("a=100&b=200",function(response){
    //     alert(response)
    //   });
    // }



    // 封装3：参数优化成对象
    // function ajax(query,cb){
    //   const xhr = new XMLHttpRequest();
    //   xhr.open("get","http://zhangpeiyue.com/sum?"+Object.keys(query).map(key=>key+"="+query[key]).join("&"));
    //   xhr.send();
    //   xhr.onload = function(){
    //     cb(xhr.response);
    //   }
    // }
    // // 输出响应体
    // btns[0].onclick = function(){
    //   ajax({a:10,b:20},function(response){
    //     console.log(response);
    //   });
    // }
    // // 弹出响应体
    // btns[1].onclick = function(){
    //   ajax({
    //     a:100,
    //     b:200
    //   },function(response){
    //     alert(response)
    //   });
    // }


    // 优化4：
    function ajax({query,success}){
      const xhr = new XMLHttpRequest();
      xhr.open("get","http://zhangpeiyue.com/sum?"+Object.keys(query).map(key=>key+"="+query[key]).join("&"));
      xhr.send();
      xhr.onload = function(){
        success(xhr.response);
      }
    }
    // 输出响应体
    btns[0].onclick = function(){
      ajax({
        query:{
          a:10,
          b:20
        },
        success(response){
          console.log(response)
        }
      });
    }
    // 弹出响应体
    btns[1].onclick = function(){
      ajax({
        query:{
          a:100,
          b:200,
        },
        success(response) {
          alert(response);
        }
      });
    }
</script>
</html>